<template>
	<Layout>
		<div class="container">
			<div class="journal-hero">
				<h1 class="journal-header">
					a wise person once said...
				</h1>
			</div>
		</div>
		<g-link class="journal-post" to="/">
			<div class="container journal">
				<h2 class="journal-title">Gridsome with Forestry CMS</h2>
				<p class="journal-excerpt">Get up and running with Forestry CMS, a git-backed headless CMS with a slick editing interface.</p>
			</div>
		</g-link>
	</Layout>
</template>

<script>
export default {
	name: 'Journal'
}
</script>

<style>
.journal-hero {
	padding: 4rem 0;
	text-align: center;
	color: #f3f3f3;
}
.journal-header{
	font-size: 3rem;
	font-weight: 700;
	padding: 0;
	margin: 0;
}
.journal-title {
	font-size: 2rem;
	color:#000;
}
.journal-post {
	display: block;
	padding: 2rem 0;
	text-decoration: none;
	transition: background .5s ease;
}
.journal-post:hover {
  background-color: #f3f3f3;
}
.journal-post:hover {
  transform: translateX(4rem);
}
.journal-post {
  transition: transform .5s ease;
}
.container.journal {
  max-width: 720px;
}
a {
  color: inherit;
}
</style>